<template>
  <view class="content">
    <view class="list">
      <view class="item">
        <view class="item-bd">
          <view class="des">
            <view class="label">订单编号</view>
            <view class="con">{{ order_no }}</view>
          </view>
          <view class="des">
            <view class="label">开票金额</view>
            <view class="con price">￥{{ price }}</view>
          </view>
        </view>
      </view>

      <view class="item">
        <view class="item-bd">
          <view class="des">
            <view class="label">发票类型</view>
            <view class="con">
              <u-radio-group v-model="form.type">
                <u-radio
                  :name="1"
                  v-if="types.includes(1)"
                  shape="circle"
                  active-color="#F60313"
                  >增值税普通发票</u-radio
                >
                <u-radio
                  :name="2"
                  v-if="types.includes(2)"
                  shape="circle"
                  active-color="#F60313"
                  >增值税专用发票</u-radio
                >
              </u-radio-group>
            </view>
          </view>

          <view class="des">
            <view class="label">单位名称</view>
            <view class="con">
              <input
                v-model="form.title"
                type="text"
                :placeholder-style="placeholderStyle"
                placeholder="请输入单位名称"
              />
            </view>
          </view>

          <view class="des">
            <view class="label">纳税人识别号</view>
            <view class="con">
              <input
                v-model="form.code"
                type="text"
                :placeholder-style="placeholderStyle"
                placeholder="请输入纳税人识别号"
              />
            </view>
          </view>

          <template v-if="form.type == 2">
            <view class="des">
              <view class="label">注册地址</view>
              <view class="con">
                <input
                  v-model="form.ext.address"
                  type="text"
                  :placeholder-style="placeholderStyle"
                  placeholder="请输入注册地址"
                />
              </view>
            </view>
            <view class="des">
              <view class="label">注册电话</view>
              <view class="con">
                <input
                  v-model="form.ext.mobile"
                  type="tel"
                  :placeholder-style="placeholderStyle"
                  placeholder="请输入注册电话"
                />
              </view>
            </view>
            <view class="des">
              <view class="label">开户银行</view>
              <view class="con">
                <input
                  v-model="form.ext.bank"
                  type="text"
                  :placeholder-style="placeholderStyle"
                  placeholder="请输入开户银行"
                />
              </view>
            </view>
            <view class="des">
              <view class="label">银行账户</view>
              <view class="con">
                <input
                  v-model="form.ext.bank_card"
                  type="tel"
                  :placeholder-style="placeholderStyle"
                  placeholder="请输入银行账户"
                />
              </view>
            </view>

            <view class="des">
              <view class="label">收票人邮箱</view>
              <view class="con">
                <input
                  v-model="form.email"
                  type="email"
                  :placeholder-style="placeholderStyle"
                  placeholder="请输入收票人邮箱"
                />
              </view>
            </view>
          </template>
        </view>
      </view>

      <view class="item">
        <view class="item-bd">
          <view class="des">
            <view class="label">发票内容</view>
            <view class="con">
              <u-radio-group v-model="form.desc_type">
                <u-radio :name="1" shape="circle" active-color="#F60313"
                  >商品明细</u-radio
                >
                <u-radio :name="2" shape="circle" active-color="#F60313"
                  >商品类别</u-radio
                >
              </u-radio-group>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="tools-pof">
      <view class="tools-pof-box">
        <view class="btn-box">
          <view class="btn" @click="submit">提交</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { invoiceConf, orderSave } from "@/api/invoice";
import { regEmail } from "@/common/regExp";

export default {
  data() {
    return {
      order_no: "",
      price: "",

      form: {
        has_apply: 0,
        type: 1,
        title: "",
        code: "",
        email: "",
        desc_type: 1,
        ext: {
          address: "",
          mobile: "",
          bank: "",
          bank_card: ""
        }
      },
      order_id: "",
      types: [1, 2],
      placeholderStyle: "color:#8C8C8C;font-size:28rpx;"
    };
  },

  methods: {
    async init(opi) {
      let { price, order_no, params, order_id } = opi;
      this.price = price;
      this.order_no = order_no;
      this.order_id = order_id;
      try {
        const data = {
          ...JSON.parse(params)
        };

        let res = await invoiceConf();
        if (!res.code) {
          let { types } = res.data.invoiceConf.conf;
          this.types = types;
          if (types.length == 1) {
            data.type = types[0];
          }

          this.$nextTick(() => {
            this.form = data;
          });
        }
      } catch (error) {
        this.$utils.toast(error);
      }
    },

    submit() {
      this.$u.throttle(async () => {
        let { form, order_id } = this;
        if (form.title == "") return this.$utils.toast("请填写单位名称");

        if (form.code == "") return this.$utils.toast("请填写纳税人识别号");

        if (form.type == 2) {
          if (form.ext.address == "")
            return this.$utils.toast("请填写注册地址");
          if (form.ext.mobile == "") return this.$utils.toast("请填写注册电话");
          if (form.ext.bank == "") return this.$utils.toast("请填写开户银行");
          if (form.ext.bank_card == "")
            return this.$utils.toast("请填写银行账户");
        }

        if (form.email == "") return this.$utils.toast("请填写收票人邮箱");
        if (!regEmail(form.email)) return this.$utils.toast("邮箱格式不正确");

        const res = await orderSave(
          {
            order_id,
            invoiceConf: form
          },
          true
        );
        let msg = res.msg;
        if (!res.code) {
          msg = "修改成功";
        }

        this.$utils.toast(msg);
      }, 1000);
    }
  },

  onLoad(opi) {
    this.init(opi);
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 200rpx;
  box-sizing: border-box;
}

.list {
  padding: 24rpx;
}

.item {
  background: #fff;
  border-radius: 20rpx;
  padding: 0 24rpx;
  margin-bottom: 24rpx;
}

.item-hd {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 2rpx solid #f8f8f8;
  .title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 30rpx;
    color: #262626;
    font-weight: bold;
  }
}

.item-bd {
  .des {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    border-bottom: 2rpx solid #f8f8f8;

    &:last-of-type {
      border-bottom: 0;
    }
  }

  .label {
    width: 200rpx;
    margin-right: 20rpx;
    color: #8c8c8c;
  }

  .con {
    flex: 1;
    overflow: hidden;
    color: #262626;

    input {
      flex: 1;
      overflow: hidden;
      font-size: 28rpx;
      color: #262626;
    }
  }

  .price {
    color: #f0250e;
  }
}

.tools-pof {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
}

.tools-pof-box {
  padding: 10rpx 36rpx;
  padding: 10rpx 36rpx calc(constant(safe-area-inset-bottom) + 10rpx);
  padding: 10rpx 36rpx calc(env(safe-area-inset-bottom) + 10rpx);
  background: #fff;
}

.btn-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
  border-radius: 32px;
  font-size: 32rpx;
  color: #fff;
  width: 100%;

  &.on {
    background: linear-gradient(90deg, #ffb11c 0%, #ffbf14 100%);
  }
}
</style>
